.content {
  background-color: #fafafa;
}

.basicContentStyle {
  margin: 10px 60px 0;
  background-color: #fafafa;
  height: 100%;
  position: relative;
  //设置滚动条滚动
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 750px;

  &::-webkit-scrollbar {
    display: none;
  }


  .contentTop {
    //宽度是相对于父元素的
    width: 100%;
    height: 72px;
    background-color: #fff;
    transition: height 0.2s ease-in-out;
    position: absolute;
    padding: 28px 24px 0;
    //解决下层显示在上层的问题
    z-index: 100;


    .techListStyle {
      display: flex;
      flex-direction: row;
      overflow: hidden;
      flex-wrap: wrap;
      padding-bottom: 8px;

      li {
        float: left;
        font-size: 16px;
        margin-right: 31px;
        cursor: pointer;
        margin-bottom: 16px;
        height: 24px;
      }
    }

    .bottomIconStyle {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(227, 224, 224, 0.63);
      width: 30px;
      text-align: center;
      border-radius: 8px 8px 0 0;
      font-size: 8px;
      color: #212529;
    }

    &:hover {
      height: 140px;
      padding-bottom: 6px;
      //不占据真实位置
      position: absolute;
      //z-index: 100;
    }
  }

  .contentCenter {
    //margin-top: 16px;
    margin-top: 88px;
    background-color: #fff;

  }

  .contentLeft {
    width: 70%;
    padding: 0 10px 0;


    //文章展示的样式
    .articleTagStyle {
      width: 100%;
      padding: 20px 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid #f0f0f2;


      //图片样式
      .imageStyle {
        flex-basis: 22%;
        margin-right: 16px;
      }

      //文章样式
      .articleStyle {
        flex-basis: 78%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        //设置除了标题外的字体颜色
        &:not(imageStyle) {
          color: #555666;
          font-size: 13px;
        }

        //设置行距
        div {
          //margin-bottom: 3px;
        }
      }

      //设置点赞等鼠标移入变成小手
      .articleBottom {
        cursor: pointer;

        a {
          color: #555666;

          &:hover {
            color: #999aaa;
          }
        }
      }
    }
  }

  .contentRight {
    width: 30%;
    display: flex;
    justify-content: flex-end;

    .articleRecommend {
      display: flex;
      justify-content: space-between;
      font-size: large;
      margin-bottom: 5px;
      line-height: 37px;


      .articleRecommendImage {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: #793232;
        border-radius: 15px;


      }
    }

  }
}
